<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>玻璃状态卡悬停效果</title>
    <link rel="stylesheet"
        href="./styles/index.css">
    <link rel="stylesheet"
        href="./font/iconfont.css">
</head>

<body>
    <div class="container">
        <div class="glass"
            style="--r:15;"
            data-text="Design">
            <i class="iconfont icon-design_nor"></i>
        </div>
        <div class="glass"
            style="--r:5;"
            data-text="Code">
            <i class="iconfont icon-code"></i>
        </div>
        <div class="glass"
            style="--r:25;"
            data-text="Launch">
            <i class="iconfont icon-launch"></i>
        </div>
        <div class="glass"
            style="--r:-15;"
            data-text="Earn">
            <i class="iconfont icon-money-credit-card-fill"></i>
        </div>
    </div>
</body>

</html>